<template>
  <div class="home">
    <div class="home-header">
      <div class="home-header__btn" @click="onScanStandard">
        查看并领取我的电子会员 >
      </div>
      <div class="home-header__info">
        <div class="home-header__left-arrow" />
        <div class="home-header__text" @click="onApply">立即申请</div>
        <div class="home-header__right-arrow" />
      </div>
    </div>
    <div class="home-content">
      <div class="home-content__header" />
      <div v-if="!isExpand" class="home-content__contain">
        <div class="home-content__title">活动时间</div>
        <div class="home-content__text">2022年1月1日至2022年12月31日</div>
        <div class="home-content__title--long">活动对象</div>
        <div class="home-content__text">
          北京2022冬奥主题白金卡、长城数字白金卡、银联标准白金卡持卡人
        </div>
        <div class="home-content__btn" @click="onExpand" />
      </div>
      <div v-else class="home-content__contain--expand">
        <div class="home-content__title">活动时间</div>
        <div class="home-content__text">2022年1月1日至2022年12月31日</div>
        <div class="home-content__title--long">活动对象</div>
        <div class="home-content__text">
          北京2022冬奥主题白金卡、长城数字白金卡、银联标准白金卡持卡人
        </div>
        <div class="home-content__title--long">活动规则</div>
        <div class="home-content__text">
          中国银行<span style="font-weight: 600"
            >北京2022冬奥主题白金卡、长城数字白金卡、银联标准白金卡</span
          >持卡人每月消费3笔、每笔交易满等值人民币199元，且包含一次快捷支付交易（快捷支付包含微信支付、支付宝支付、美团支付、京东支付、唯品会支付），次月10日起即有机会领取自选电子会员。每月开放6万个领取名额，先到先得，剩余名额将累积至次月。活动期间，每人限参加6次。可兑换礼品清单如下：
        </div>
        <img class="home-content__img" src="../../assets/home-table.png" />
        <div class="home-content__title--long">活动细则</div>
        <div class="home-content__text">
          1、本活动限中国银行北京2022冬奥主题白金卡、长城数字白金卡、银联标准白金卡持卡人参加，当月信用卡消费达标，次月10日起即有机会兑换会员权益礼品一份，每月开放6万个兑换名额，先到先得。活动期间，每人限参加6次。
        </div>
        <div class="home-content__text">
          2、本活动有效期为：2022年1月1日至2022年12月31日，请在有效期内完成消费条件，获取达标资格，客户消费以<span
            class="gold"
            >交易时间</span
          >为准。兑换资格将保留至2023年1月31日，兑换时间结束后未兑换的资格将<span
            class="gold"
            >自动失效</span
          >。
        </div>
        <div class="home-content__text">
          3、若存在同一持卡人持多产品的情况，各卡消费不重复计算，以消费<span
            class="gold"
            >最高</span
          >的单卡达标情况为准，其他卡片不纳入统计。附属卡交易单独统计，<span
            class="gold"
            >不纳入</span
          >主卡交易。
        </div>
        <div class="home-content__text">
          4、达标资格默认绑定至持卡人在中国银行预留的手机号码。如预留手机号码有变，请及时至中国银行网点进行变更。变更成功后请致电中国银行信用卡客服电话4006695569，以避免影响享受相关服务。
        </div>
        <div class="home-content__text">
          5、持卡人可在百果心享会员季卡、叮咚买菜季卡、饿了么超级吃货卡季卡、京东PLUS会员季卡、百度网盘超级会员季卡、WPS稻壳会员季卡、哈啰出行单车90天骑行卡、龙腾出行特权卡半年卡、网易云音乐黑胶VIP季卡、哔哩哔哩大会员季卡十项会员权益中任选一项进行兑换（可重复兑换）。会员权益一经兑换<span
            class="gold"
            >不可退换</span
          >，请在有效期内完成使用。各电子券使用细则请参见商品具体介绍。
        </div>
        <div class="home-content__text">
          6、饿了么超级吃货卡季卡、京东PLUS会员季卡、百度网盘超级会员季卡、WPS稻壳会员季卡、哈啰出行单车90天骑行卡、龙腾出行特权卡半年卡、网易云音乐黑胶VIP季卡、哔哩哔哩大会员季卡兑换及使用相关问题，请致电橙谊科技客服电话4000-769-669。客服工作时间为9:00-18:00（包含周六日）。
        </div>
        <div class="home-content__text">
          7、百果心享会员季卡、叮咚买菜季卡兑换及使用相关问题，请致电上海臻客客服电话400-920-1258。客服工作时间为10:00-18:00（包含周六日）。
        </div>
        <div class="home-content__text">
          8、为更好的为持卡人提供礼品服务，中国银行会向供应商提供必要的客户信息
          （客户手机号）。若出现礼品质量相关问题，将由供应商提供查询及处理，服务中若出现纠纷和争议，中行将积极配合持卡人与供应商进行协商沟通。
        </div>
        <div class="home-content__text">
          9、持卡人如对本活动有异议，可致电中国银行信用卡客户服务热线40066-95569提出，如对获奖结果有异议，可在消费达标后<span
            class="gold"
            >3个月</span
          >内致电40066-95569提出，逾期将视为认可获奖结果。
        </div>
        <div class="home-content__title--long">温馨提示</div>
        <div class="home-content__text">
          1、持卡人若于活动期间发生逾期未还信用卡项下欠款、信用卡卡片被冻结、止付、销卡、关户、发生或涉嫌发生从事违法、违规、违反相关信用卡领用合约等情形的，即不再享有本活动项下达标资格。
        </div>
        <div class="home-content__text">
          2、该服务供应商为橙谊科技（客服电话4000769669）和上海臻客（客服电话4009201258），为做好客户信息保密，中国银行（客服电话4006695569）已与其签署保密协议，以保证服务正常提供及配送。
        </div>
        <div class="home-content__text">
          3、中国银行将在法律允许的范围内，保留根据需要取消本活动或修订活动相关条款的权利（包括但不限于活动时间、活动内容、活动规则、名额限制等）并通过中国银行官方网站或其他相关渠道公示生效。如与本活动规则冲突或有额外的约定协议的项目客户，将不得叠加参加本活动。
        </div>
      </div>
      <div class="home-content__footer" />
    </div>
    <van-popup round v-model:show="isLoginPopupVisble">
      <div class="login-form">
        <div class="login-title">登录</div>
        <div class="login-row">
          <div class="login-icon">
            <img
              class="login-icon__phone"
              src="../../assets/home-phone-icon.png"
            />
          </div>

          <input
            class="login-input"
            pattern="[0-9]*"
            type="tel"
            maxlength="11"
            v-model="mobile"
            placeholder="请输入手机号"
            @input="onMobileInput"
          />
        </div>
        <div class="login-row">
          <div class="login-icon">
            <img
              class="login-icon__verify"
              src="../../assets/home-verify-icon.png"
            />
          </div>

          <input
            class="login-input__verify"
            pattern="[0-9]*"
            type="tel"
            maxlength="4"
            v-model="verifyCode"
            placeholder="请输入验证码"
            @input="onVerifyCodeInput"
          />

          <div class="login-verify-btn" @click="onSendVerifyCode(mobile)">
            {{ countDown > 0 ? `重新发送(${countDown}s)` : '发送验证码' }}
          </div>
        </div>
        <div class="login-btn" @click="onLogin">立即登录</div>
      </div>
    </van-popup>
    <van-popup round v-model:show="isDeclarePopupVisible">
      <div class="declare-popup">
        <div class="declare-popup__title">服务声明</div>
        <div class="declare-popup__content">
          以下页面服务由北京橙谊科技有限公司提供
        </div>
        <div class="declare-popup__btn" @click="onConfrimDeclare">确定</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import useExpand from './hooks/useExpand'
import useVerify from './hooks/useVerify'
import useLogic from './hooks/useLogic'

export default {
  setup() {
    const { isExpand, onExpand } = useExpand()
    const { countDown, onSendVerifyCode } = useVerify()
    const {
      isLoginPopupVisble,
      isDeclarePopupVisible,
      mobile,
      verifyCode,
      onMobileInput,
      onVerifyCodeInput,
      onScanStandard,
      onLogin,
      onApply,
      onConfrimDeclare
    } = useLogic()

    return {
      isExpand,
      isLoginPopupVisble,
      isDeclarePopupVisible,
      mobile,
      verifyCode,
      onMobileInput,
      onVerifyCodeInput,
      onExpand,
      onScanStandard,
      countDown,
      onSendVerifyCode,
      onApply,
      onLogin,
      onConfrimDeclare
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  .home-header {
    width: 375px;
    height: 408px;

    background-image: url(../../assets/home-back.png);
    background-size: 100% 100%;
    overflow: hidden;

    &__btn {
      width: 343px;
      height: 45px;
      margin-top: 290px;
      margin-left: 16px;
      background-image: url(../../assets/home-btn.png);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    &__info {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }
    &__left-arrow {
      background-image: url(../../assets/home-left-arrow.png);
      background-size: 100% 100%;
      width: 22px;
      height: 20px;
    }
    &__text {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #eed7ba;
      margin: 0 8px;
    }
    &__right-arrow {
      background-image: url(../../assets/home-left-arrow.png);
      background-size: 100% 100%;
      width: 22px;
      height: 20px;
      transform: rotate(180deg);
    }
  }
  .home-content {
    margin-bottom: 40px;
    .home-content__contain {
      width: 347px;
      height: 164px;
      margin: 0 14px;
      background-image: url(../../assets/home-textbox-center.png);
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 2px 16px;
    }
    .home-content__contain--expand {
      width: 347px;
      margin: 0 14px 0 14px;
      background-image: url(../../assets/home-textbox-center.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding: 0 16px;
    }
    .home-content__header {
      margin: 10px 14px 0 14px;
      width: 347px;
      height: 20px;
      background-size: 100% 100%;
      background-image: url(../../assets/home-textbox-top.png);
    }
    .home-content__footer {
      margin: 0 14px 10px 14px;
      width: 347px;
      height: 20px;
      background-size: 100% 100%;
      background-image: url(../../assets/home-textbox-bottom.png);
    }
    .home-content__title {
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #bf8b37;
    }
    .home-content__title--long {
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #bf8b37;
      margin-top: 18px;
    }
    .home-content__text {
      margin-top: 9px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 21px;
    }
    .home-content__btn {
      width: 42px;
      height: 22px;
      margin-left: 138px;
      background-image: url(../../assets/home-arrow.png);
      background-size: 100% 100%;
      margin-top: 19px;
    }
    .home-content__img {
      width: 288px;
      height: 134px;
      margin: 10px 10px 0 10px;
    }
    .gold {
      font-weight: bold;
      color: #bf8b37;
    }
  }
  .login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 345px;
    height: 280px;
    .login-title {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .login-row {
      margin-top: 25px;
      display: flex;
      width: 262px;
      height: 41px;
      border: 1px solid #666666;
      border-radius: 5px;
      .login-icon {
        min-width: 43px;
        .login-icon__phone {
          width: 13px;
          height: 20px;
          margin-top: 11px;
          margin-left: 24px;
        }
        .login-icon__verify {
          width: 17px;
          height: 16px;
          margin-top: 13px;
          margin-left: 22px;
        }
      }

      .login-input {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        flex: 1;

        border: 0px;
        outline: none;
      }
      .login-input__verify {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        width: 120px;

        border: 0px;
        outline: none;
      }
      .login-verify-btn {
        flex: 1;
        height: 40px;
        background: #ffffff;
        border-left: 1px solid #666666;

        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
    }
    .login-btn {
      width: 271px;
      height: 41px;
      background-image: url(../../assets/login-btn.png);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;

      margin-top: 30px;
    }
  }
  .declare-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 345px;
    height: 182px;
    .declare-popup__title {
      margin-top: 20px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
    .declare-popup__content {
      font-size: 12px;
      margin-top: 24px;
    }
    .declare-popup__btn {
      margin-top: 39px;
      width: 270px;
      height: 41px;
      border-radius: 22px;
      background: linear-gradient(-4deg, #ebd9c0, #efb26d);
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.67),
        0px 1px 0px 0px rgba(255, 255, 255, 0.96);

      font-size: 15px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
